<template>
  <div id="component_dyxx">
    <dl v-for="(dyxx,dyxx_index) in dyxsList" :key="dyxx_index" class="component_dyxx_item">
      <dt :class="'dyxxlist_'+dyxx.type"><span>{{dyxx.date}}</span>{{dyxx.name}}</dt>
      <dd v-for="(dlchil,dlchil_index) in  dyxx.childrens" :key="dlchil_index">
          <a href="dlchil.url">{{dlchil.title}}</a>
      </dd>
    </dl>
  </div>
</template>

<script>

export default {
  data() {
    return {
      dyxsList:[
        {
          type:"jgdz",date:"2-22",name:"【机关党建】",
          childrens:[
            {title:"让党心和民心贴得更紧——写在习近平总书记“2·19”重要讲话发表3周年之际",url:""},
            {title:"跨越发展正当时（在习近平新时代中国特色社会主义思想指引下——新时代新作为新篇章）",url:""}
          ]
        },
        {
          type:"nbkw",date:"2-21",name:"【内部刊物】",
          childrens:[
            {title:"让党心和民心贴得更紧——写在习近平总书记“2·19”重要讲话发表3周年之际",url:""}
          ]
        },
        {
          type:"aqzx",date:"2-20",name:"【安全资讯】",
          childrens:[
            {title:"让党心和民心贴得更紧——写在习近平总书记“2·19”重要讲话发表3周年之际",url:""},
            {title:"跨越发展正当时（在习近平新时代中国特色社会主义思想指引下——新时代新作为新篇章）",url:""},
            {title:"非现场交通违法可扫码缴罚款",url:""},
          ]
        }
      ],
    }
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
#component_dyxx{
  padding: 20px;
  margin: 0;
  overflow: hidden;
  dl{
    display: block;
    margin: 0;
    font-size: 14px;
    color: #666;
    dt,dd{
      display: block;
      position: relative;
      line-height: 30px;
      margin: 0;
    }
    .dyxxlist_jgdz::after{border-color: #fc5959;}
    .dyxxlist_nbkw::after{border-color: #1596e0;}
    .dyxxlist_aqzx::after{border-color: #ffac00;}
    dt{
      color: #333333;
      span{position: relative;display: inline-block;padding-left: 20px;width: 70px;color: #333333;}
      &::after{
        content:"";
        display:block;
        width:12px;
        height: 12px;
        background-color: #ffffff;
        position:absolute;
        left: 0px;
        top: 9px;
        border-radius: 50%;
        border:2px red solid;
      }
    }
    dd{
      color: #666;
      padding-left: 70px;
      word-wrap: no-wrap;
      text-overflow:ellipsis;
      overflow:hidden;
      white-space: nowrap;
      width: 100%;
      a{
        color: #666;
      }
      &::after{
        content:"";
        display:block;
        width:6px;
        height: 6px;
        background-color: #cccccc;
        position:absolute;
        left: 3px;
        top: 12px;
        border-radius: 50%;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
</style>